<template>
	<view>
		<view class="flex align-center justify-between px-2">
			<text class="font-md">
				热门分类
			</text>
			<view class="flex align-center justify-between font text-secondary" @click="openMore">
				更多
				<text class="iconfont icon-jinru"></text>
			</view>
		</view>
		<view class="flex align-center py-3 border-bottom px-2 ">
			<block v-for="(item ,index) in data" :key="index">
				<view class="border rounded bg-light mx-1 px-2 animated " hover-class="jello" @click="hotitemclick(item)">
					{{item.name}}
				</view>
			</block>
		</view>
	</view>
</template>

<script>
	export default {
		name: "hot-nav",
		props: {
			data: {
				type: Array,
				default: ()=>[]
			}
		},
		methods: {
			hotitemclick(data) {
				this.$emit("hotitemclick", data)
			},
			openMore(){
				uni.navigateTo({
					url:"/pages/topic-nav/topic-nav"
				})
				
			}
		}
	}
</script>

<style>

</style>
